<script>
import Taro from "@tarojs/taro";
import { reactive, ref } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
import {
  getList,
  copyRocarsById,
  deleteRocarsById,
  postWxHkCcrnList,
} from "./api";
import TzVue, { useReachBottom, usePullDownRefresh } from "@/lib/TzVue";

export default new TzVue({
  name: "CcrnInquireHome",
  components: {},
  setup() {
    const state = reactive({
      billStatusDic: {
        99: "错误",
        100: "草稿",
        120: "准备寄出",
        300: "寄出中",
        400: "传送至政府",
        600: "已过境",
        999: "未知",
      },
      listData: [],
      queryParam: { currentPage: 1, pageSize: 10 },
      pageCount: 0, //总页数(每次查询完的时候会修改该值)
    });
    const searchVal = ref("");
    //默认查询车辆
    const initList = () => {
      Taro.showLoading();
      const param = { ...state.queryParam, ccrn: searchVal.value };
      getList(param)
        .then((res) => {
          if (state.queryParam.currentPage <= 1) {
            state.listData = res.data?.recordList;
          } else {
            state.listData.push(...res.data?.recordList);
          }
          state.pageCount = res.data.pageCount;
          Taro.hideLoading();
        })
        .catch(() => {
          Taro.hideLoading();
        });
    };
    initList();
    const { navigateTo } = useTzRouter();

    //输入框输入建议
    const handleQuerySuggest = (queryString, cb) => {
      const param = {
        ccrn: queryString,
        currentPage: 1,
        pageSize: 10,
      };
      postWxHkCcrnList(param).then((res) => {
        cb(res.data?.recordList);
      });
    };
    //搜索
    const handleSearch = () => {
      state.queryParam.currentPage = 1;
      initList();
    };
    //清空
    const handleClear = () => {
      handleSearch();
    };
    //复制
    const handleCopy = (item, event) => {
      // 阻止冒泡
      event.stopPropagation();
      const id = item.id;
      copyRocarsById(id).then(() => {
        initList();
        return Taro.showModal({
          content: "复制成功",
          confirmText: "好",
          showCancel: false,
        });
      });
    };
    //删除
    const handleDelete = (item, event) => {
      // 阻止冒泡
      event.stopPropagation();
      Taro.showModal({
        title: "",
        content: "确定删除该条香港无缝(CCRN)信息吗？",
        success: function (res) {
          if (res.confirm) {
            const id = item.id;
            deleteRocarsById(id).then((res) => {
              initList();
            });
          }
        },
      });
    };

    //查看回执
    const handleReceipt = (item, event) => {
      // 阻止冒泡
      event.stopPropagation();
      navigateTo({
        path: "/pages/subHK/ccrnInquire/receipt/index",
        query: {
          docId: item.id,
          ccrn: item.ccrn,
        },
      });
    };

    //下拉刷新
    usePullDownRefresh(() => {
      state.queryParam.currentPage = 1;
      initList();
      Taro.stopPullDownRefresh();
    });

    //滚动底部
    useReachBottom(() => {
      if (state.pageCount <= state.queryParam.currentPage) {
        // 已加载全部数据
        Taro.showToast({
          title: "已经到底了",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      state.queryParam.currentPage++;
      initList();
    });

    return () => (
      <tz-view class="ccrn-inquire-home">
        <tz-cell class="search-box" border>
          <tz-autocomplete
            prefix-icon="search"
            v-model={searchVal.value}
            placeholder="请输入CCRN"
            clearable
            round
            showAction
            onClear={handleClear}
            onSearch={handleSearch}
            fetchSuggestions={handleQuerySuggest}
          ></tz-autocomplete>
        </tz-cell>
        {state.listData.map((item, index) => {
          let statusColor = "";
          let receiptBut = false;
          if (["120", "300"].includes(item.status)) {
            statusColor = "primary";
          } else if (["400", "600"].includes(item.status)) {
            statusColor = "success";
          } else if (["99", "999"].includes(item.status)) {
            statusColor = "danger";
          } else {
            statusColor = "info";
          }
          if (["400", "99", "600"].includes(item.status)) {
            receiptBut = true;
          }
          return (
            <tz-view
              class="list-row"
              key={index}
              onClick={() =>
                navigateTo({
                  path: "/pages/subHK/ccrn/home/index",
                  query: {
                    ccrnId: item.id,
                  },
                })
              }
            >
              <tz-view class="list-row-item-l">
                <tz-cell class="list-row-item-title list-row-status">
                  <tz-cell class="list-row-item-ccrn">
                    <text class="item-label">CCRN：</text>
                    <text>{item.ccrn}</text>
                  </tz-cell>
                  <tz-cell class="list-row-but">
                    <tz-button
                      type="primary"
                      class="btn-box"
                      onClick={(event) => handleCopy(item, event)}
                    >
                      复制
                    </tz-button>
                    <>
                      {item.status === "100" && (
                        <tz-button
                          type="danger"
                          class="btn-box"
                          onClick={(event) => handleDelete(item, event)}
                        >
                          删除
                        </tz-button>
                      )}
                    </>
                  </tz-cell>
                </tz-cell>

                <tz-cell class="list-row-item-cont">
                  <text class="item-label">进出口类型：</text>
                  <text>
                    {item.impExpMode === "I" ? "大陆 -> 香港" : "香港 -> 大陆"}
                  </text>
                </tz-cell>

                <tz-cell class="list-row-item-cont list-row-status">
                  <text class="item-label">收货人名称：</text>
                  <text class="item-content">{item.consigneeName}</text>
                  <tz-view class={["status-name", statusColor]}>
                    {state.billStatusDic[item.status]}
                  </tz-view>
                </tz-cell>
                <tz-cell class="list-row-item-cont list-row-status">
                  <text class="item-label">发货人名称：</text>
                  <text class="item-content">{item.consignorName}</text>
                  <>
                    {receiptBut && (
                      <tz-view
                        class="item-status-receipt"
                        onClick={(event) => handleReceipt(item, event)}
                      >
                        查看回执
                      </tz-view>
                    )}
                  </>
                </tz-cell>
                <tz-cell class="list-row-item-cont">
                  <text class="item-label">货物说明：</text>
                  <text class="item-content">{item.cargoDesc}</text>
                </tz-cell>
                <tz-cell class="list-row-item-cont">
                  <text class="item-label">货运日期：</text>
                  <text class="item-content">{item.depArrTime}</text>
                </tz-cell>
              </tz-view>
            </tz-view>
          );
        })}
      </tz-view>
    );
  },
});
</script>

<style lang="scss">
.ccrn-inquire-home {
  .search-box {
    width: 100%;
    padding: 4px 0;
    background-color: $white;
  }
  .list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: $white;
    margin-bottom: 6px;

    &:active {
      background-color: $hover-color;
    }

    .list-row-item-l {
      font-size: 17px;
      flex: 1;
      .list-row-item-title {
        padding-bottom: 10px;
        color: $primary-color;
        font-size: 17px;
        color: #333333;
        padding-left: 20px;
        display: flex;
        justify-content: space-between;
        @extend %bb1;
        .list-row-item-ccrn {
          line-height: 27px;
          font-size: 17px;
          .tz-cell-value {
            display: inline;
          }
        }
        .list-row-but {
          width: auto;
          .btn-box {
            width: 60px;
            height: 24px;
            font-size: 17px;
            justify-self: flex-end;
            margin-bottom: 3px;
            margin-left: 5px;
          }
        }
      }
      .list-row-item-cont {
        line-height: 43px;
        font-size: 17px;
        .item-label {
          padding-right: 8px;
          color: $text-color;
          width: 110px;
          text-align: right;
          align-self: flex-start;
        }
        .item-content {
          flex: 1;
          width: 1px;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行
        }
      }
      .list-row-status {
        .tz-cell-value {
          display: flex;
          justify-content: space-between;
          .item-status-receipt {
            color: #1ba91d;
            width: 90px;
            text-align: right;
            align-self: flex-start;
          }
        }
        .status-name {
          align-self: flex-start;
          width: 90px;
          text-align: right;
          &.primary {
            color: $primary-color;
          }
          &.success {
            color: $success-color-end;
          }
          &.danger {
            color: $danger-color;
          }
          &.info {
            color: $info-color;
          }
        }
      }
    }
  }
}
</style>
